<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 通配符选择器，选择所有标签 */
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .column{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .container{
      align-items: center;
      row-gap: 2vw;
    }
    /* 头部导航栏 */
    .header{
      width: 100%;
      height: 20vw;
      /* background-color: pink; */
      align-items: center;
      justify-content: space-between;
      padding-left: 3vw;
      padding-right: 2vw;
    }
    .header-img{
      width: 7vw;
      height: 7vw;
    }
    .header-title{
      font-size: 20px;
    }
    .header-right{
      color: rgb(36, 190, 167);
      text-decoration: none;
    }
    .middon-img{
      width: 70vw;
      text-align: center;
    }
    .middon-text{
      font-weight: 800;
      font-size: 5vw;
    }
    .middon-text-second{
      color:  #63b3c2;
    }
    .bottom{
      width: 80vw;
      height: 20vw;
      border-top: 1px solid #e8e8e8;
      margin-top: 3vw;
    }
    .left-icon{
      width: 10vw;
      height: 10vw;
      margin-right: 3vw;
    }
    .bottom-text{
      align-items: start;
      flex: 1;
      row-gap: 2vw;
    }
    .bottom-text-top{
      font-size: 16px;
    }
    .bottom-text-bottom{
      font-size: 14px;
      color: #999999;
    }
    .bottom-text-right-icon{
      padding-left:2vw;
    }

    
  </style>
</head>
<body>
  <!-- 布局方式：排版布局、 -->
   <div class="column container">
    <!-- 顶部导航栏 -->
    <div class="row header">
      <img class="header-img" src="../day01/images/arrow-left.png" alt="">
      <h1 class="header-title">急速问诊</h1>
      <a class="header-right" href="">问诊记录</a>
    </div>
     <!-- 中：快速匹配专业医生 -->
     <img class="middon-img" src="../day01/images/consult-fast.png" alt=""></img>
     <p class="middon-text"><span class="middon-text-second">20s </span>快速匹配专业医生</p>
     <!-- 下：内容列表 -->
      <div class="row bottom">
        <img class="left-icon" src="../day01/images/doctor.png" alt="">
        <div class="column bottom-text">
          <p class="bottom-text-top">三甲图文问诊</p>
          <p class="bottom-text-bottom">三甲主治及以上级别医生</p>
        </div>
        <img class="left-icon bottom-text-icon" src="../day01/images/arrow-right.png" alt=""></img>
      </div>
      <div class="row bottom">
        <img class="left-icon" src="../day01/images/message.png" alt="">
        <div class="column bottom-text">
          <p class="bottom-text-top">普通图文问诊</p>
          <p class="bottom-text-bottom">二甲主治及以上级别医生</p>
        </div>
        <img class="left-icon bottom-text-icon" src="../day01/images/arrow-right.png" alt=""></img>
      </div>
      </div>
   </div>
</body>
</html>